<template>
    <div
        :class="`diy_goods_cate  ${data.class.radius}`"
        :style="{'margin-bottom': data.style.margin_bottom+'px',
         'margin-left':data.style.margin_x+'px', 'margin-right': data.style.margin_x+'px',
         'background':data.style.background}"
    >
        <span v-for="(cate,i) in cates" class="diy_goods_cate_li" :style="{color:data.style.color}">
            {{cate.title}}
        </span>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {simpleGet} from "@/utils/request";

const props = defineProps<{
    data: any
}>()

const cates = ref<any>([])
const getCates = () => {
    simpleGet('store.uniShow/goodsCateList').then(r => {
        console.log("goodscate",r)
        cates.value = r.items
    })
}

getCates()

</script>

<style scoped lang="scss">
@use "src/views/site/diy/style.css";
.diy_goods_cate{
    height: 40px;
    white-space: nowrap;

    .diy_goods_cate_li{
        height: 40px;
        line-height: 40px;
        margin-right: 10px;
    }
}

</style>
